<template>
    <div>
        <div class="search-term">
            <el-form :inline="true" :model="searchInfo" class="demo-form-inline">
                <el-form-item label="名称">
                    <el-input placeholder="搜索条件" v-model="searchInfo.tagName"></el-input>
                </el-form-item>
                <el-form-item label="状态">
                    <el-select v-model="searchInfo.tagStatus" placeholder="请选择">
                        <el-option
                                v-for="item in options"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="用户名(姓名)">
                    <el-input placeholder="搜索条件" v-model="searchInfo.tagAuthor"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button @click="onSubmit" type="primary" v-has="'sysTag:query'">查询</el-button>
                </el-form-item>
                <el-form-item>
                    <el-button @click="openDialog" type="primary" v-has="'sysTag:add'">新增标签</el-button>
                </el-form-item>
                <el-form-item>
                    <el-popover placement="top" v-model="deleteVisible" width="160">
                        <p>确定要删除吗？</p>
                        <div style="text-align: right; margin: 0">
                            <el-button @click="deleteVisible = false" size="mini" type="text">取消</el-button>
                            <el-button @click="onDelete" size="mini" type="primary">确定</el-button>
                        </div>
                        <el-button icon="el-icon-delete" size="mini" slot="reference" type="danger" v-has="'sysTag:del'">批量删除</el-button>
                    </el-popover>
                </el-form-item>
            </el-form>
        </div>
        <el-table
                :data="tableData"
                @selection-change="handleSelectionChange"
                border
                ref="multipleTable"
                stripe
                style="width: 100%"
                tooltip-effect="dark"
        >
            <el-table-column type="selection" width="55"></el-table-column>

            <el-table-column label="名称" prop="tagName" width="120"></el-table-column>

            <el-table-column label="状态" prop="tagStatus" width="120"></el-table-column>

            <el-table-column label="用户名(姓名)" prop="tagAuthor" width="200"></el-table-column>

            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button class="table-button" @click="updateSysTag(scope.row)" size="small" type="primary"
                               icon="el-icon-edit" v-has="'sysTag:edit'">变更
                    </el-button>
                    <el-button
                            @click="updateSysTagStatus(scope.row)"
                            icon="el-icon-check"
                            size="small"
                            type="success"
                            v-if="scope.row.tagStatus=='已审核'"
                            v-has="'sysTag:check'"
                    >未审核
                    </el-button>
                    <el-button
                            @click="updateSysTagStatus(scope.row)"
                            icon="el-icon-check"
                            size="small"
                            type="success"
                            v-if="scope.row.tagStatus=='未审核'"
                            v-has="'sysTag:check'"
                    >审核
                    </el-button>
                    <el-button type="danger" icon="el-icon-delete" size="mini" @click="deleteRow(scope.row)" v-has="'sysTag:del'">删除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>

        <el-pagination
                :current-page="page"
                :page-size="pageSize"
                :page-sizes="[10, 30, 50, 100]"
                :style="{float:'right',padding:'20px'}"
                :total="total"
                @current-change="handleCurrentChange"
                @size-change="handleSizeChange"
                layout="total, sizes, prev, pager, next, jumper"
        ></el-pagination>

        <el-dialog :before-close="closeDialog" :visible.sync="dialogFormVisible" title="新增标签">
            <el-form :rules="rules" :model="formData" ref="sysTagForm" label-position="right" label-width="80px">
                <el-form-item label="名称:" label-width="80px" prop="tagName">
                    <el-input v-model="formData.tagName" clearable placeholder="请输入"></el-input>
                </el-form-item>
            </el-form>
            <div class="dialog-footer" slot="footer">
                <el-button @click="closeDialog">取 消</el-button>
                <el-button @click="enterDialog" type="primary">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    import {
        createSysTag,
        deleteSysTag,
        deleteSysTagByIds,
        updateSysTag,
        findSysTag,
        getSysTagList
    } from "@/api/sys_tag";  //  此处请自行替换地址
    import {formatTimeToStr} from "@/utils/date";
    import infoList from "@/mixins/infoList";

    export default {
        name: "SysTag",
        mixins: [infoList],
        data() {
            async function findSysTagByTagName(rule, value, callback) {
                const res = await findSysTag({tagName: value});
                if (res.code == 0) {
                    if (res.data == "记录不存在") {
                        callback()
                    } else {
                        callback("标签名称已存在，请修改")
                    }
                } else {
                    callback("查询异常")
                }
            }

            return {
                options: [{
                    value: '',
                    label: '---'
                }, {
                    value: '已审核',
                    label: '已审核'
                }, {
                    value: '未审核',
                    label: '未审核'
                }],
                listApi: getSysTagList,
                dialogFormVisible: false,
                type: "",
                deleteVisible: false,
                multipleSelection: [],
                formData: {
                    tagName: "",
                    tagStatus: "",
                    tagAuthor: "",

                },
                rules: {
                    tagName: [
                        {required: true, message: "请输入标签名称", trigger: "blur"},
                        {validator: findSysTagByTagName, trigger: "blur"}
                    ]
                }
            };
        },
        filters: {
            formatDate: function (time) {
                if (time != null && time != "") {
                    var date = new Date(time);
                    return formatTimeToStr(date, "yyyy-MM-dd hh:mm:ss");
                } else {
                    return "";
                }
            },
            formatBoolean: function (bool) {
                if (bool != null) {
                    return bool ? "是" : "否";
                } else {
                    return "";
                }
            }
        },
        methods: {
            //条件搜索前端看此方法
            onSubmit() {
                this.page = 1
                this.pageSize = 10
                this.getTableData()
            },
            handleSelectionChange(val) {
                this.multipleSelection = val
            },
            deleteRow(row) {
                this.$confirm('确定要删除吗?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.deleteSysTag(row);
                });
            },
            async onDelete() {
                const ids = []
                if (this.multipleSelection.length == 0) {
                    this.$message({
                        type: 'warning',
                        message: '请选择要删除的数据'
                    })
                    return
                }
                this.multipleSelection &&
                this.multipleSelection.map(item => {
                    ids.push(item.ID)
                })
                const res = await deleteSysTagByIds({ids})
                if (res.code == 0) {
                    this.$message({
                        type: 'success',
                        message: '删除成功'
                    })
                    if (this.tableData.length == ids.length) {
                        this.page--;
                    }
                    this.deleteVisible = false
                    this.getTableData()
                }
            },
            async updateSysTag(row) {
                const res = await findSysTag({ID: row.ID});
                this.type = "update";
                if (res.code == 0) {
                    this.formData = res.data.resysTag;
                    this.dialogFormVisible = true;
                }
            },
            async updateSysTagStatus(row) {
                const sysRes = await findSysTag({ID: row.ID});
                if (sysRes.code == 0) {
                    this.formData = sysRes.data.resysTag;
                    var tag_status = "已审核"
                    if (this.formData.tagStatus == "已审核") {
                        tag_status = "未审核"
                    }
                    this.formData.tagStatus = tag_status
                    const res = await updateSysTag(this.formData);
                    if (res.code == 0) {
                        this.$message({
                            type: "success",
                            message: "状态已变更为" + tag_status
                        });
                        this.getTableData();
                    }
                }


            },
            closeDialog() {
                this.dialogFormVisible = false;
                this.formData = {
                    tagName: "",
                    tagStatus: "",
                    tagAuthor: "",

                };
            },
            async deleteSysTag(row) {
                const res = await deleteSysTag({ID: row.ID});
                if (res.code == 0) {
                    this.$message({
                        type: "success",
                        message: "删除成功"
                    });
                    if (this.tableData.length == 1) {
                        this.page--;
                    }
                    this.getTableData();
                }
            },
            async enterDialog() {

                this.$refs.sysTagForm.validate(async valid => {
                    if (valid) {
                        let res;
                        switch (this.type) {
                            case "create":
                                res = await createSysTag(this.formData);
                                break;
                            case "update":
                                res = await updateSysTag(this.formData);
                                break;
                            default:
                                res = await createSysTag(this.formData);
                                break;
                        }
                        if (res.code == 0) {
                            this.$message({
                                type: "success",
                                message: "创建/更改成功"
                            })
                            this.closeDialog();
                            this.getTableData();
                        }
                    } else {
                        return
                    }
                });

            },
            openDialog() {
                this.type = "create";
                this.dialogFormVisible = true;
            }
        },
        async created() {
            await this.getTableData();

        }
    };
</script>

<style>
</style>
